<template>
	<view>
		<view class="text-center text-red padding-top" v-if="form.remek">拒绝原因：{{form.remek}}</view>

		<view class="">
			<view class=" padding">
				<view class=" padding bg radius">
					<u-form :model="forms" ref="uForm" label-position="top" :label-style='lableStyle'>
						<u-form-item label="企业名称" :border-bottom='false'>
							<u-input placeholder="请输入企业名称" v-model="forms.name" />
						</u-form-item>
						<u-form-item label="企业地址" :border-bottom='false'>
							<u-input placeholder="请输入企业地址" v-model="forms.address" :disabled="true"  @click="bindOpen()" />
						</u-form-item>
						<u-form-item label="联系方式" :border-bottom='false'>
							<u-input placeholder="请输入电话号码" v-model="forms.phone" type="number" maxlength="11" />
						</u-form-item>
					</u-form>
				</view>
				<view class="text-white padding bg radius margin-top">
					<u-form :model="forms" label-position="top">
						<u-form-item label="店铺名称">
							<u-input v-model="forms.shopName" placeholder="请输入店铺名称" />
						</u-form-item>
						<u-form-item label="店铺类型">
							<u-input v-model="forms.shopType" placeholder="请输入店铺类型" />
						</u-form-item>
						<u-form-item label="开店时间">
							<!-- #ifdef MP-WEIXIN -->
							<u-input v-model="forms.startTime" placeholder="请填写" :disabled="true"
								@click="startShow = true" />
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<view style="width: 100%;">
								<picker mode="time" :value="forms.startTime" placeholder="请填写" start="00:00" end="23:59"
									@change="bindTimeChange">
									<view class="uni-input">{{forms.startTime?forms.startTime:'请填写'}}</view>
								</picker>
							</view>
							<!-- #endif -->
						</u-form-item>
						<u-form-item label="闭店时间">
							<!-- #ifdef MP-WEIXIN -->
							<u-input v-model="forms.endTime" :disabled="true" placeholder="请填写"
								@click="endShow = true" />
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<view style="width: 100%;">
								<picker mode="time" :value="forms.endTime" placeholder="请填写" start="00:00" end="23:59"
									@change="bindTimeChanges">
									<view class="uni-input">{{forms.endTime?forms.endTime:'请填写'}}</view>
								</picker>
							</view>
							<!-- #endif -->
						</u-form-item>
						<!-- <u-form-item label="店铺电话">
							<u-input v-model="forms.phone" placeholder="请输入店铺电话" />
						</u-form-item> -->
						<!-- <u-form-item label="店铺地址">
							<u-input v-model="forms.address" :disabled="true" placeholder="请填写" @click="bindOpen()" />
						</u-form-item> -->
					</u-form>
				</view>

				<view class=" padding bg radius margin-top">
					<view class="text-lg">营业执照正面</view>
					<view class="margin-top"
						style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
						<view style="text-align: center;margin: 80rpx auto 0;" @click="addImages(3)"
							v-if="!forms.front">
							<image src="../static/photo.png" mode="widthFix" style="width: 73rpx;"></image>
							<view class="text-sm  margin-top-sm">添加营业执照正面</view>
						</view>
						<image @click="disabled? '':addImages(3)" v-else :src="forms.front"
							style="width: 100%;height: 320rpx;"></image>
					</view>
				</view>
				<view class="text-white padding bg radius margin-tb">
					<view>
						<view class="text-lg margin-top-sm text-black">店铺logo</view>
						<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
							<view v-if="forms.shopImg.length">
								<view class="margin-top flex margin-right-sm flex-wrap">
									<view class="flex"
										style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;">
										<image :src="forms.shopImg" style="width: 100%;height: 100%;"></image>
										<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
											@click="removeImg()">
											<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
										</view>

									</view>
								</view>
							</view>
							<view class="margin-top" @click="addImages(4)" v-if="forms.shopImg.length<=0">
								<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
									class="flex justify-center align-center">
									<view>
										<view class="text-center">
											<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
											</image>
										</view>
										<view class="text-center text-black">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view>
						<view class="text-lg margin-top-sm text-black">店铺主页图（可多张）</view>
						<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
							<view v-if="addressImgs.length">
								<view class="margin-top flex margin-right-sm flex-wrap">
									<view class="flex"
										style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;"
										v-for="(image,index) in addressImgs" :key="index">
										<image :src="image" style="width: 100%;height: 100%;"></image>
										<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
											@click="removeImgs(index)">
											<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
										</view>

									</view>
								</view>
							</view>
							<view class="margin-top" @click="addImage()" v-if="addressImgs.length<6">
								<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
									class="flex justify-center align-center">
									<view>
										<view class="text-center">
											<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
											</image>
										</view>
										<view class="text-center text-black">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<u-button @click="submit" class="margin-top" :custom-style="customStyle" shape="circle"
					:hair-line="false" v-if="Qe!=2">提交认证
				</u-button>
			</view>

		</view>
		<!-- 时间筛选 -->
		<u-picker v-model="startShow" mode="time" :params="params" @confirm="getStarttime()"></u-picker>

		<u-picker v-model="endShow" mode="time" :params="paramss" @confirm="getEndtime()"></u-picker>
	</view>
</template>

<script>
	import configdata from '../../common/config.js';

	export default {
		data() {
			return {
				// tab: [{
				// 	id: 1,
				// 	name: '个人认证'
				// }, {
				// 	id: 2,
				// 	name: '企业认证'
				// }],
				classify: 2,
				form: {
					name: '',
					idNumber: '',
					front: '',
					back: '',
					remek: '',
					address: '',
					phone: '',
					shopImg: '',
					shopName: '',
					addressImg: '',
					startTime: '',
					endTime: '',
					shopType: '',
					latitude: '',
					longitude: ''
				},
				forms: {
					name: '',
					address: '',
					idNumber: '',
					front: '',
					back: '',
					address: '',
					phone: '',
					shopImg: '',
					shopName: '',
					addressImg: '',
					startTime: '',
					endTime: '',
					shopType: '',
					latitude: '',
					longitude: ''
				},
				// disabled: false,
				lableStyle: {
					color: '#000000',
					fontSize: '28upx'
				},
				customStyle: {
					backgroundColor: '#557EFD',
					color: '#000000',
					border: 0
				},
				customStyle1: {
					backgroundColor: '#ccc',
					color: '#000000',
					border: 0
				},
				renzheng: 0,
				Qe: 0,
				geRen: 0,
				startShow: false,
				endShow: false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				paramss: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				addressImg: [],
				addressImgs: []
			}
		},
		onLoad(e) {
			console.log(e)
			// this.classify = e.classify

			this.getUserInfo()

		},
		onShow() {
			this.Qe = uni.getStorageSync("Qe")
			// this.geRen = uni.getStorageSync("geRen")
		},
		methods: {
			bindTimeChange: function(e) {
				// if (this.classify == 1) {
				// 	this.form.startTime = e.target.value
				// } else if (this.classify == 2) {
				// 	this.forms.startTime = e.target.value
				// }
				this.forms.startTime = e.target.value
			},
			bindTimeChanges: function(e) {
				this.forms.endTime = e.target.value
				// if (this.classify == 1) {
				// 	this.form.endTime = e.target.value
				// } else if (this.classify == 2) {
				// 	this.forms.endTime = e.target.value
				// }
			},
			removeImgs(index) {
				console.log(index)

				this.addressImgs.splice(index, 1)
			},
			removeImg(index) {
				console.log(index)

				this.forms.shopImg = ''
			},
			getStarttime(e) {
				this.forms.startTime = e.hour + ':' + e.minute
				// if (this.classify == 1) {
				// 	this.form.startTime = e.hour + ':' + e.minute
				// } else if (this.classify == 2) {
				// 	this.forms.startTime = e.hour + ':' + e.minute
				// }
			},
			getEndtime(e) {
				this.forms.endTime = e.hour + ':' + e.minute
				// if (this.classify == 1) {
				// 	this.form.endTime = e.hour + ':' + e.minute
				// } else if (this.classify == 2) {
				// 	this.forms.endTime = e.hour + ':' + e.minute
				// }

			},
			// 店铺地址
			bindOpen(e) {
				console.log(e)
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.forms.address = res.address
						that.forms.latitude = res.latitude
						that.forms.longitude = res.longitude
					}
				});
			},
			cut(tab) {
				this.classify = tab.id
				this.getUserInfo()
			},
			submit() {


				this.forms.addressImg = this.addressImgs
				this.forms.addressImg = this.forms.addressImg.toString();
				if (!this.forms.name) {
					uni.showToast({
						title: '请输入企业名称',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.forms.address) {
					uni.showToast({
						title: '请输入企业地址',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.forms.phone) {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.forms.shopName) {
					uni.showToast({
						title: '请填写店铺名称',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.forms.shopType) {
					uni.showToast({
						title: '请填写店铺类型',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.forms.startTime) {
					uni.showToast({
						title: '请填写开店时间',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.forms.endTime) {
					uni.showToast({
						title: '请填写闭店时间',
						icon: 'none',
						duration: 1000
					})
					return
				}
				// if (!this.form.phone) {
				// 	uni.showToast({
				// 		title: '请填写店铺电话',
				// 		icon: 'none',
				// 		duration: 1000
				// 	})
				// 	return
				// }
				if (!this.forms.address) {
					uni.showToast({
						title: '请填写店铺地址',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.forms.front) {
					uni.showToast({
						title: '请上传营业执照正面',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.forms.shopImg) {
					uni.showToast({
						title: '请上传店铺logo',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.forms.addressImg) {
					uni.showToast({
						title: '请上传店铺主页图',
						icon: 'none',
						duration: 1000
					})
					return
				}

				let data = {
					name: this.forms.name,
					address: this.forms.address,
					phone: this.forms.phone,
					classify: this.classify,
					front: this.forms.front,
					address: this.forms.address,
					phone: this.forms.phone,
					shopImg: this.forms.shopImg,
					shopName: this.forms.shopName,
					addressImg: this.forms.addressImg,
					startTime: this.forms.startTime,
					endTime: this.forms.endTime,
					shopType: this.forms.shopType,
					latitude: this.forms.latitude,
					longitude: this.forms.longitude

				}

				this.$Request.post("/app/userCertification/insert", data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '认证提交成功！',
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			getUserInfo() {
				this.$Request.get("/app/userCertification/queryInsert?classify=" + this.classify).then(res => {
					console.log(res)
					if (res.code == 0 && res.data) {
						if (res.data.classify) {
							this.classify = res.data.classify
							uni.setStorageSync("classify", res.data.classify)
						}
						// if (this.classify == 1) {
						// 	this.form = res.data
						// 	this.addressImg = res.data.addressImg.split(',')
						// } else if (this.classify == 2) {
						// 	this.form = res.data
						// 	this.addressImgs = res.data.addressImg.split(',')
						// }
						this.forms = res.data
						this.addressImgs = res.data.addressImg.split(',')

						if (res.data.status == 1) {
							this.disabled = true
						}
						if (res.data.status == 2 && res.data.remek) {
							this.form.remek = res.data.remek ? res.data.remek : ''
						}
					}
				});
			},
			addImages(e) {
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < 1; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								// url: this.config("APIHOST1") + '/alioss/upload', //真实的接口地址https://xxpwadmin.xianmxkj.com/sqx_fast/alioss/upload
								url: 'https://jiazhengshopv5.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										that.form.front = JSON.parse(uploadFileRes.data).data
									} else if (e == 3) {
										that.forms.front = JSON.parse(uploadFileRes.data).data
									} else if (e == 2) {
										that.form.back = JSON.parse(uploadFileRes.data).data
									} else if (e == 4) {
										that.forms.shopImg = JSON.parse(uploadFileRes.data)
											.data
										// if (that.classify == 1) {
										// 	that.form.shopImg = JSON.parse(uploadFileRes.data).data
										// } else if (that.classify == 2) {
										// 	that.forms.shopImg = JSON.parse(uploadFileRes.data)
										// 		.data
										// }

									}

									uni.hideLoading();
								}
							});
						}
					}
				})
			},
			// 图片上传
			addImage() {
				let that = this
				uni.chooseImage({
					count: 6,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								// url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
								url: 'https://jiazhengshopv5.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									uni.hideLoading();
									that.addressImgs.push(JSON.parse(uploadFileRes.data)
										.data)
									// if (that.classify == 1) {
									// 	that.addressImg.push(JSON.parse(uploadFileRes.data)
									// 		.data)
									// }
									// else if (that.classify == 2) {
									// 	that.addressImgs.push(JSON.parse(uploadFileRes.data)
									// 		.data)
									// 	console.log(that.addressImgs, '---------00')
									// }
								}
							});
						}
					}
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.u-size-default {
		background: #557EFD !important;
		color: #FFFFFF !important;
	}

	.u-input__input {
		color: balck !important;
	}

	.title_btn {
		height: 78upx;
		line-height: 78upx;
		/* background: #f7f7f7; */
	}

	.bgCol2 {
		color: #557EFD;
		background: #F2F5FF;
	}
</style>